<template>
  <div class="searchPage">
    <div class="search-contain">
      <div class="order-rule">
        <span class="orderway active" @click="order(0)">综合排序</span>
        <span class="orderway" @click="order(1)">最多点赞</span>
        <span class="orderway" @click="order(2)">最多播放</span>
        <span class="orderway" @click="order(3)">最新发布</span>
        <hr>
      </div>
      <div  v-if="tableData.length == 0">
        暂无数据
      </div>
      <div v-else class="card-container" @click="gotoPlayVideo($event)">
        <el-card class="video-card play" :id="item.id" v-for="item of data" :key="item.id" shadow="hover" :body-style="{ padding: '0px'}">
          <img class="img-pic" id="a" :videoName="item.videoName" :url="item.url" :src="getUrl(item.pic)">
          <div class="content-wrapper">
            <span class="card-title" :videoName="item.videoName" :url="item.url">{{item.videoName}}</span>
            <i class="iconfont icon-avatar1"> {{item.authorName}}</i>
            <i class="iconfont icon-play1"> {{item.playNumber}}</i>
            <i class="iconfont icon-clock1"> {{attachDate(item.createTime)}}</i>
            <i class="iconfont icon-good"> {{item.praise}}</i>
          </div>
        </el-card>
      </div>
      
      <!-- 翻页 -->
      <div class="pagination">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="15"
          layout="total, prev, pager, next, jumper"
          :total="tableData.length"
          background>
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {getVideoByVideoName,getVideoByStyle} from '../api/index'
import {mixin} from '../mixins/index'
export default {
  name:'search',
  mixins:[mixin],
  data(){
    return {
      sortord:0,      //排序方式
      tableData:[],   //显示的用户信息
      currentPage:1,  //当前页
      pageSize:18,    //每一页个数
    }
  },
  watch:{
    sortord(v){
      document.getElementsByClassName('orderway')[0].classList.remove('active')
      document.getElementsByClassName('orderway')[1].classList.remove('active')
      document.getElementsByClassName('orderway')[2].classList.remove('active')
      document.getElementsByClassName('orderway')[3].classList.remove('active')
      document.getElementsByClassName('orderway')[v].classList.add('active')
      switch (v) {
        case 0:
          this.tableData.sort(function (a, b) {
            if (a.praise != 0 ||b.praise != 0) {
              let a1 = (a.praise/a.playNumber) ? (a.praise/a.playNumber) : 0
              let b1 = (b.praise/b.playNumber) ? (b.praise/b.playNumber) : 0
              return b1 - a1;
            }
            return b.playNumber - a.playNumber;
          });
          break;
        case 1:  //根据点赞数排序
          this.tableData.sort(function (a, b) {
            if (a.praise != b.praise) {
              return b.praise - a.praise;
            }
            return b.playNumber - a.playNumber;
          });
          break;
        case 2:  //根据播放量排序
          this.tableData.sort(function (a, b) {
            return b.playNumber - a.playNumber;
          });
          break;
        case 3: //根据创建时间排序
          this.tableData.sort(function (a, b) {
            let x = a.createTime
            let y = b.createTime
            let a1 = x.slice(0,4)+x.slice(5,7)+x.slice(8,10)+x.slice(11,13)+x.slice(14,16)+x.slice(17,19)
            let b1 = y.slice(0,4)+y.slice(5,7)+y.slice(8,10)+y.slice(11,13)+y.slice(14,16)+y.slice(17,19)
            return a1 - b1;
          });
          break;
      }
    }
  },
  computed:{
    data(){
      return this.tableData.slice((this.currentPage-1)*this.pageSize, this.currentPage*this.pageSize)
    }
  },
  created(){
    this.getData()
  },
  methods:{
    getData(){
      this.tableData=[]
      if (this.$route.query.text) {
        getVideoByVideoName(this.$route.query.text)
          .then(res =>{
            this.tableData = res
            this.currentPage = 1
            this.tableData.sort(function (a, b) {
              return b.praise/b.playNumber - a.praise/a.playNumber;
            });
          }).catch(err =>{
            console.log(err);
          })
      }else if (this.$route.query.style){
        getVideoByStyle(this.$route.query.style)
          .then(res =>{
            this.tableData = res
            this.currentPage = 1
            this.tableData.sort(function (a, b) {
              return b.praise/b.playNumber - a.praise/a.playNumber;
            });
          }).catch(err =>{
            console.log(err);
          })
      }
    },
    //排序方式
    order(way){
      this.sortord = way
    },
    //获取当前页
    handleCurrentChange(val){
      this.currentPage = val;
    },
  }
}
</script>

<style scoped>
@import '../assets/css/search.css';
</style>